<template>
	<view>
		<view class="bg"></view>
		<form action="">
			<view class="container">
				<view class="name line">
					<view class="label">优惠券名称</view>
					<input class="input" type="text" />
				</view>
				<view class="type line">
					<view class="label">优惠券类型</view>
					<view class="">
						<view class="type-item">
							<radio-group>
								<text>满减券</text>
								<radio value="item.value" checked />
								<text>打折券</text>
								<radio value="item.value" />
							</radio-group>
							<view class="condition">
								满
								<input type="text" />
								元减
								<input type="text" />
								元
							</view>
						</view>
					</view>
				</view>
				<view class="begainGrant line">
					<view class="label">
						发放开始时间
					</view>
					<view class="">
						<picker mode="date" :value="begainGrant" start="2025-1-1" end="2099-1-1"
							@change="bindBegainGrantChange">
							<view>{{begainGrant}}</view>
						</picker>
					</view>
				</view>
				<view class="begainGrant line">
					<view class="label">
						发放结束时间
					</view>
					<view class="">
						<picker mode="date" :value="endGrant" start="2025-1-1" end="2099-1-1"
							@change="bindEndGrantChange">
							<view>{{endGrant}}</view>
						</picker>
					</view>
				</view>
				<view class="number line">
					<view class="label">投放数量</view>
					<input class="input" type="text" />
					<text>张</text>
				</view>
				<view class="astrict line">
					<view class="label">每人限领</view>
					<input class="input" type="text" />
					<text>张</text>
				</view>
				<view class="useTime line">
					<view class="label">
						使用有效期
					</view>
					<view class="usePicker">
						<picker mode="date" :value="begainUse" start="2025-1-1" end="2099-1-1"
							@change="bindBegainUseChange">
							<view>{{begainUse}}</view>
						</picker>
						<picker mode="date" :value="endUse" start="2025-1-1" end="2099-1-1" @change="bindEndUseChange">
							<view>{{endUse}}</view>
						</picker>
					</view>
				</view>

			</view>
			<button>确认投放</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				begainGrant: '开始时间',
				endGrant: '结束时间',
				begainUse: '开始时间',
				endUse: '结束时间'
			}
		},
		methods: {
			bindBegainGrantChange(event) {
				this.begainGrant = event.detail.value
			},
			bindEndGrantChange(event) {
				this.endGrant = event.detail.value
			},
			bindBegainUseChange(event) {
				this.begainUse = event.detail.value
			},
			bindEndUseChange(event) {
				this.endUse = event.detail.value
			}
		}
	}
</script>

<style>
	.bg {
		height: 400rpx;
		background-color: #3486FD;
	}

	.line {
		margin-bottom: 30rpx;
		display: flex;
	}

	.container {
		margin: 0 20rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		margin-top: -350rpx;
		border-radius: 30rpx;

	}

	input {
		text-align: center;
	}

	.input {
		border-radius: 30rpx;
		border: 1rpx solid #dcdcdc;
		height: 60rpx;
		padding: 0 20rpx;
		font-size: 16rpx;
	}

	.label {
		font-weight: bold;
		width: 200rpx;
		line-height: 60rpx;
	}


	.type-item>radio-group {
		display: flex;
		height: 60rpx;
		align-items: center;
	}

	.type-item>radio-group>text {
		margin-right: 10rpx;
	}

	.type-item>radio-group>radio {
		margin-right: 30rpx;
	}

	.condition {
		display: flex;
		margin-top: 30rpx;
	}

	.condition>input {
		border-bottom: 1rpx solid black;
		width: 150rpx;
		text-align: center;
		color: red;
	}

	picker {
		border-radius: 30rpx;
		border: 1rpx solid #dcdcdc;
		height: 60rpx;
		padding: 0 20rpx;
		font-size: 16rpx;
		display: flex;
		align-items: center;
		width: 160rpx;
		color: #8f939c;
		justify-content: center;
	}

	.number>input {
		width: 100rpx;
		margin-right: 20rpx;
	}

	.number {
		display: flex;
		align-items: center;
	}

	.astrict>input {
		width: 100rpx;
		margin-right: 20rpx;
	}

	.astrict {
		display: flex;
		align-items: center;
	}

	.usePicker {
		display: flex;
	}

	.usePicker>picker:nth-child(1) {
		margin-right: 20rpx;
	}
	
	button {
		width: 550rpx;
		margin-top: 60rpx;
		background-color: #0C65E8;
		color: #FFFFFF;
		border-radius: 50rpx;
	}
</style>